import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:get/get.dart';
import 'package:short_drama/pages/login/login_viewmodel.dart';

import '../../utils/validate.dart';
import '../../views/nav_bar.dart';
import '../mine/info.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final LoginViewmodel viewModel = LoginViewmodel();
  String accountText = '';
  String passwordText = '';
  String phoneText = '';
  String smsText = '';

  login() async {
    if (!viewModel.hasChoose.value) {
      EasyLoading.showToast('请同意使用条款');
      return;
    }
    if (viewModel.chooseIndex.value == 0) {
      if (accountText.isEmpty) {
        EasyLoading.showToast('请输入手机号');
        return;
      } else if (!ValidateTool.validateChineseMobile(accountText)) {
        EasyLoading.showToast('电话号码格式错误');
        return;
      }
      if (passwordText.isEmpty) {
        EasyLoading.showToast('输入验证码');
        return;
      }
      viewModel.queryLogin(accountText, passwordText);
    } else if (viewModel.chooseIndex.value == 1) {
      if (phoneText.isEmpty) {
        EasyLoading.showToast('输入手机号');
        return;
      } else if (!ValidateTool.validateChineseMobile(phoneText)) {
        EasyLoading.showToast('电话号码格式错误');
        return;
      }
      if (smsText.isEmpty) {
        EasyLoading.showToast('输入验证码');
        return;
      }
      viewModel.querySmsLogin(phoneText, smsText);
    }
  }

  /*
     
  */

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xf00a0f12),
      child: GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus();
        },
        child: Stack(
          children: [
            SizedBox(
              child: Image.asset(
                'assets/images/bg_login.png',
                width: double.infinity,
                height: double.infinity,
                fit: BoxFit.cover,
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                NavBarView(),
                Padding(
                  padding: EdgeInsets.only(top: 64, bottom: 34, left: 24),
                  child: Text(
                    '欢迎登录',
                    style: TextStyle(
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
                Obx(
                  () => Container(
                    padding: EdgeInsets.only(left: 16, right: 16),
                    child: Stack(
                      children: [
                        if (viewModel.chooseIndex.value == 0)
                          Image.asset(
                            'assets/images/bg_account.png',
                            width: double.infinity,
                            fit: BoxFit.fill,
                          ),
                        if (viewModel.chooseIndex.value == 1)
                          Image.asset(
                            'assets/images/bg_sms.png',
                            width: double.infinity,
                            fit: BoxFit.fill,
                          ),
                        Column(
                          children: [
                            _switchTitle(),
                            Padding(
                              padding: EdgeInsets.only(
                                left: 19,
                                right: 19,
                                top: 42,
                              ),
                              child: Column(
                                children: [
                                  IndexedStack(index: viewModel.chooseIndex.value,children: [
                                    _registerView(),
                                    _smsView(),
                                  ],),
                                  Visibility(
                                    visible: viewModel.chooseIndex.value == 0,
                                    replacement: SizedBox(
                                      height: 78,
                                      width: double.infinity,
                                    ),
                                    child: Container(
                                      height: 21,
                                      width: double.infinity,
                                      margin: EdgeInsets.only(
                                        top: 24,
                                        bottom: 33,
                                      ),
                                      child: Text(
                                        '忘记密码',
                                        textAlign: TextAlign.right,
                                        style: TextStyle(
                                          fontSize: 14,
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(
                                    width: double.infinity,
                                    height: 52,
                                    child: TextButton(
                                      style: TextButton.styleFrom(
                                        backgroundColor: Color(0xff0B9970),
                                        foregroundColor: Colors.white,
                                      ),
                                      onPressed: () {
                                        login();
                                      },
                                      child: Text(
                                        '登录',
                                        style: TextStyle(fontSize: 16),
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(left: 28, top: 28),
                                    child: Row(
                                      children: [
                                        Obx(
                                          () => Checkbox(
                                            value: viewModel.hasChoose.value,
                                            side: BorderSide(
                                              color: Color(0xff0B9970),
                                            ),
                                            // 自定义边框颜色和粗细等属性
                                            shape: CircleBorder(),
                                            onChanged: (v) {
                                              viewModel.changeChoose();
                                            },
                                          ),
                                        ),
                                        Expanded(
                                          child: Wrap(
                                            children: [
                                              Text(
                                                '注册即代表同意小丑IP的',
                                                style: TextStyle(
                                                  fontSize: 11,
                                                  color: Color(0xff888888),
                                                ),
                                              ),
                                              GestureDetector(
                                                onTap: () {
                                                  Get.to(
                                                    () => InfoPage(
                                                      '服务条款',
                                                      'agreement/clause',
                                                    ),
                                                  );
                                                },
                                                child: Text(
                                                  '《使用条款》',
                                                  style: TextStyle(
                                                    fontSize: 11,
                                                    color: Color(0xff888888),
                                                  ),
                                                ),
                                              ),
                                              Text(
                                                '和',
                                                style: TextStyle(
                                                  fontSize: 11,
                                                  color: Color(0xff888888),
                                                ),
                                              ),
                                              GestureDetector(
                                                onTap: () {
                                                  Get.to(
                                                    () => InfoPage(
                                                      '隐私政策',
                                                      'agreement/privacy',
                                                    ),
                                                  );
                                                },
                                                child: Text(
                                                  '《隐私政策》',
                                                  style: TextStyle(
                                                    fontSize: 11,
                                                    color: Color(0xff888888),
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _switchTitle() {
    return Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () {
              viewModel.changeIndex(0);
            },
            child: Container(
              color: Colors.transparent,
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.only(top: 16, bottom: 8),
                    child: Text(
                      '账号登录',
                      style: TextStyle(
                        color:
                            viewModel.chooseIndex.value == 0
                                ? Colors.white
                                : Colors.white70,
                        fontSize: 15,
                      ),
                    ),
                  ),
                  Visibility(
                    visible: viewModel.chooseIndex.value == 0,
                    replacement: SizedBox(height: 4, width: double.infinity),
                    child: Container(
                      width: 22,
                      height: 4,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(2),
                        color:
                            viewModel.chooseIndex.value == 1
                                ? Colors.white
                                : Colors.white70,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              viewModel.changeIndex(1);
            },
            child: Container(
              color: Colors.transparent,
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.only(top: 16, bottom: 8),
                    child: Text(
                      '验证码登录',
                      style: TextStyle(color: Colors.white, fontSize: 15),
                    ),
                  ),
                  Visibility(
                    visible: viewModel.chooseIndex.value == 1,
                    replacement: SizedBox(height: 4, width: double.infinity),
                    child: Container(
                      width: 22,
                      height: 4,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(2),
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  // Widget _accountView() {
  //   return Column(
  //     crossAxisAlignment: CrossAxisAlignment.start,
  //     children: [
  //       Text('用户名', style: TextStyle(fontSize: 14, color: Colors.white70)),
  //       Container(
  //         height: 52,
  //         margin: EdgeInsets.only(top: 8, bottom: 16),
  //         child: CupertinoTextField(
  //           padding: EdgeInsets.only(left: 24, right: 24),
  //           keyboardType: TextInputType.number,
  //           placeholder: '输入用户名',
  //           placeholderStyle: TextStyle(color: Colors.white30),
  //           decoration: BoxDecoration(
  //             borderRadius: BorderRadius.circular(12),
  //             color: Colors.white24,
  //           ),
  //           maxLines: 1,
  //           onChanged: (value) {
  //             accountText = value;
  //           },
  //         ),
  //       ),
  //       Padding(
  //         padding: EdgeInsets.only(bottom: 8),
  //         child: Text(
  //           '密码',
  //           style: TextStyle(fontSize: 14, color: Colors.white70),
  //         ),
  //       ),
  //       SizedBox(
  //         height: 52,
  //         child: CupertinoTextField(
  //           padding: EdgeInsets.only(left: 24),
  //           obscureText: viewModel.openShow.value ? false : true,
  //           keyboardType: TextInputType.number,
  //           placeholder: '输入密码',
  //           placeholderStyle: TextStyle(color: Colors.white30),
  //           decoration: BoxDecoration(
  //             borderRadius: BorderRadius.circular(12),
  //             color: Colors.white24,
  //           ),
  //           suffix: GestureDetector(
  //             onTap: () {
  //               viewModel.changeOpenShow();
  //             },
  //             child: SizedBox(
  //               width: 44,
  //               child: Icon(
  //                 viewModel.openShow.value
  //                     ? Icons.remove_red_eye
  //                     : Icons.remove_red_eye_outlined,
  //                 color: Colors.white,
  //               ),
  //             ),
  //           ),
  //           maxLines: 1,
  //           onChanged: (value) {
  //             passwordText = value;
  //           },
  //         ),
  //       ),
  //     ],
  //   );
  // }

  Widget _registerView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('手机号', style: TextStyle(fontSize: 14, color: Colors.white70)),
        Container(
          height: 52,
          margin: EdgeInsets.only(top: 8, bottom: 16),
          child: CupertinoTextField(
            padding: EdgeInsets.only(left: 24, right: 24),
            keyboardType: TextInputType.number,
            placeholder: '输入手机号',
            placeholderStyle: TextStyle(color: Colors.white30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Colors.white24,
            ),
            maxLines: 1,
            onChanged: (value) {
              accountText = value;
            },
          ),
        ),
        Padding(
          padding: EdgeInsets.only(bottom: 8),
          child: Text(
            '验证码',
            style: TextStyle(fontSize: 14, color: Colors.white70),
          ),
        ),
        SizedBox(
          height: 52,
          child: CupertinoTextField(
            padding: EdgeInsets.only(left: 24),
            keyboardType: TextInputType.number,
            placeholder: '输入验证码',
            placeholderStyle: TextStyle(color: Colors.white30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Colors.white24,
            ),
            suffix: GestureDetector(
              onTap: () {
                if (viewModel.countDown.value > 0) {
                  return;
                }
                if (accountText.isEmpty) {
                  EasyLoading.showToast('请输入手机号');
                  return;
                } else if (!ValidateTool.validateChineseMobile(accountText)) {
                  EasyLoading.showToast('电话号码格式错误');
                  return;
                }
                viewModel.querySms(phoneText);
              },
              child: SizedBox(
                width: 100,
                child: Text(
                  viewModel.countDown.value <= 0
                      ? '获取验证码'
                      : '${viewModel.countDown.value}',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            maxLines: 1,
            onChanged: (value) {
              passwordText = value;
            },
          ),
        ),
      ],
    );
  }

  Widget _smsView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('手机号', style: TextStyle(fontSize: 14, color: Colors.white70)),
        Container(
          height: 52,
          margin: EdgeInsets.only(top: 8, bottom: 16),
          child: CupertinoTextField(
            padding: EdgeInsets.only(left: 24, right: 24),
            keyboardType: TextInputType.number,
            placeholder: '输入手机号',
            placeholderStyle: TextStyle(color: Colors.white30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Colors.white24,
            ),
            maxLines: 1,
            onChanged: (value) {
              phoneText = value;
            },
          ),
        ),
        Padding(
          padding: EdgeInsets.only(bottom: 8),
          child: Text(
            '验证码',
            style: TextStyle(fontSize: 14, color: Colors.white70),
          ),
        ),
        SizedBox(
          height: 52,
          child: CupertinoTextField(
            padding: EdgeInsets.only(left: 24),
            keyboardType: TextInputType.number,
            placeholder: '输入验证码',
            placeholderStyle: TextStyle(color: Colors.white30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Colors.white24,
            ),
            suffix: GestureDetector(
              onTap: () {
                if (viewModel.countDown.value > 0) {
                  return;
                }
                if (phoneText.isEmpty) {
                  EasyLoading.showToast('输入手机号');
                  return;
                } else if (!ValidateTool.validateChineseMobile(phoneText)) {
                  EasyLoading.showToast('电话号码格式错误');
                  return;
                }
                viewModel.querySms(phoneText);
              },
              child: SizedBox(
                width: 100,
                child: Text(
                  viewModel.countDown.value <= 0
                      ? '获取验证码'
                      : '${viewModel.countDown.value}',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            maxLines: 1,
            onChanged: (value) {
              smsText = value;
            },
            enabled: viewModel.countDown.value <= 0,
          ),
        ),
      ],
    );
  }
}
